<%--
  Created by IntelliJ IDEA.
  User: 86131
  Date: 2021/9/1
  Time: 16:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>12588_一按我帮你</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/message.js"></script>
    <style>
        .paddtop{
            padding-top: 5px;
        }
        .search-input{
            float:left;
            border:2px dodgerblue solid;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 5px;
            margin-left: 60px;
        }
        .search-btn{
            float:left;
            border: 1px dodgerblue solid;
            width: 90px;
            height: 35px;
            background-color: dodgerblue;
            text-align: center;
            line-height: 35px;
            color: white;
            margin-top: 5px;
        }
        .login{
            margin-top: 12px;

        }
        .gn{
            border-bottom: 2px dodgerblue solid;
        }
        .query{
            border: 1px darkgray solid ;
        }
        .padleft{
            padding-left: 100px;
        }
        .cha{
            padding-top: 5px;
        }
        .foot{
            background-color:dodgerblue ;
            text-align: center;
            height: 35px;
            line-height: 35px;
            color: white;
        }
        #main{
            height: 700px;
        }

    </style>

    <script>
        $(function (){
            <%--console.log(${bool});--%>
            if (${bool}==0){
                alert("您搜索的路线不存在！");
            }
        })
    </script>
</head>
<body>
<div class="row">
    <!--            轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/轮播图5.jpg"  alt="......">
            </div>
            <div class="item">
                <img src="img/轮播图4.jpg" alt="...">
            </div>
            <div class="item">
                <img src="img/轮播图6.jpg" alt="...">
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<div class="container">
    <!--        功能区分割线-->
    <div class="row gn">
        <img src="img/火车.png"  height="35px">
        <span>功能区</span>
    </div>
    <!--        查询区-->
    <div class="row cha">
        <!--        车票查询-->
        <div class="col-md-6 query">
            <div class="cha">
                <form class="form-horizontal"  action = "${pageContext.request.contextPath}/ThroughTrainServlet">
                    <div class="form-group">
                        <label for="start" class="col-sm-2 control-label">起始站</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="start" placeholder="起始站" name="startStation">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="end" class="col-sm-2 control-label">终点站</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="end" placeholder="终点站" name="endStation">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date" class="col-sm-2 control-label">日期</label>
                        <div class="col-sm-7">
                            <input type="date" class="form-control" id="date" placeholder="时间" name="date" max="2021-09-22" min="2021-09-07">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-2">
                            <button type="submit" class="btn btn-default">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--            旅客须知及常见问题-->
        <div class="col-md-3 padleft">
            <div class="img-thumbnail">
                <img src="img/规章.png" height="145px">
                <p>铁路互联网购票须知</p>
                <font color="#1e90ff">旅客须知</font>
            </div>

        </div>
        <div class="col-md-3 padleft">
            <div class="img-thumbnail">
                <img src="img/问题.png" height="145px">
                <p>常见问题</p>
                <font color="#1e90ff">旅客常问</font>
            </div>
        </div>
    </div>
    <!--        国内旅游区分界线-->
    <div class="row gn">
        <img src="img/旅行.png" height="35px">
        <span>国内旅游</span>
    </div>
    <!--        国内旅游地区标-->
    <div class="row">
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
        <div class="col-md-3 cha">
            <div class="img-thumbnail">
                <img src="img/陇南.jpeg" height="145px" width="250px">
                <p>陇上江南,旅游圣地,防秃头养老必备必去之地,空气宜人,四季分明</p>
                <font color="#1e90ff">$ 0</font>
            </div>
        </div>
    </div>
</div>

<!--页脚部分-->
<footer class="container-fluid">
  <div class="row">
    <div class="col-md-12  foot">
      <sapn>山东大学 成凯 201900301250 19软件工程6班</sapn>
    </div>
  </div>
</footer>
</body>
</html>
